<template>
  <el-container v-loading="searchLoading">
    <el-header>
      <el-form :inline="true" ref="searchForm" :model="searchForm">
        <el-form-item label="名称:" prop="name">
          <el-input v-model="searchForm.name" placeholder="请输入名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="时间" label-width="50px">
          <el-date-picker
            v-model="searchData"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="试卷分类" prop="cateId">
          <el-input placeholder="请选择分类" :value="current.name" type="text" readonly>
            <template slot="prepend">
              <el-button class="el-icon-edit" @click="checkSort" type="text">选择分类</el-button>
            </template>
            <template slot="suffix">
              <el-button
                v-show="current.name"
                class="el-icon-delete-solid"
                @click="delectCate"
                type="text"
              >清空</el-button>
            </template>
          </el-input>
        </el-form-item>
        <!--        <el-form-item label="考试类型" label-width="80px">-->
        <!--          <el-radio-group v-model="searchForm.type">-->
        <!--            <el-radio-button :label="0">全部</el-radio-button>-->
        <!--            <el-radio-button :label="1">正式</el-radio-button>-->
        <!--            <el-radio-button :label="2">模拟</el-radio-button>-->
        <!--            <el-radio-button :label="3">三违</el-radio-button>-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="searchSubmit(1)">查询</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table :data="list">
        <el-table-column type="index" label="序号"/>
        <el-table-column prop="name" label="考试名称"/>
        <!--        <el-table-column prop="type" label="考试类型">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{parseInt(scope.row.type) === 1 ? '正式考试' : parseInt(scope.row.type) === 2 ? '模拟考试'-->
        <!--            :'三违考试'}}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="joinExamUserNumber" label="参考人数"/>
        <el-table-column prop="passUserNumber" label="及格"/>
        <el-table-column prop="noPassUserNumber" label="未及格"/>
        <el-table-column prop="noJoinExamUserNumber" label="未参加"/>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="analysis(scope.row.id)">数据分析</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="searchLimit"
        @current-change="searchPage"
        :current-page="searchPages.page"
        :page-size="searchPages.limit"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes,prev, pager, next, jumper"
        :total="searchTotal"
      ></el-pagination>
    </el-main>
    <el-drawer
      title="数据分析"
      :visible.sync="drawer"
      direction="rtl"
      size="80%"
      :before-close="_=>{this.drawer = false}"
    >
      <el-tabs  type="border-card" @tab-click="tabClick" v-model="tab">
        <el-tab-pane label="部门查询" name="dept" v-loading="deptLoading">
          <el-container>
            <el-header>
              <el-form :inline="true" ref="deptForm" :model="deptForm">
                <el-form-item prop="deptId" label="部门" label-width="50px">
                  <el-cascader
                    placeholder="点击选择部门"
                    :options="deptList"
                    v-model="deptForm.deptId"
                    :props="deptListTreeProps"
                    filterable
                    clearable
                    change-on-select
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="deptSubmit()">查询</el-button>
                  <el-button @click="_export()" type="primary">导出</el-button>
                </el-form-item>
              </el-form>
            </el-header>
            <el-main>
              <el-table :data="deptData" height="500">
                <el-table-column type="index" label="序号"/>
                <el-table-column prop="deptName" label="部门名称"/>
                <el-table-column prop="examName" label="考试名称"/>
                <!--                <el-table-column prop="type" label="考试类型">-->
                <!--                  <template slot-scope="scope">-->
                <!--                    {{parseInt(scope.row.type) === 1 ? '正式考试' : parseInt(scope.row.type) === 2 ?-->
                <!--                    '模拟考试'-->
                <!--                    :'三违考试'}}-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <el-table-column prop="examStartTime" label="考试开始时间"/>
                <el-table-column prop="examUserNum" label="参加人数"/>
                <el-table-column prop="passMark" label="及格分数"/>
                <el-table-column prop="passUserNum" label="及格"/>
                <el-table-column prop="noPassUserNum" label="未及格人数"/>
              </el-table>
              <el-pagination
                @size-change="deptLimit"
                @current-change="deptPage"
                :current-page="deptPages.page"
                :page-sizes="[10, 20, 50]"
                :page-size="deptPages.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="deptTotal"
              ></el-pagination>
            </el-main>
          </el-container>
        </el-tab-pane>
        <el-tab-pane label="个人查询" name="personal" v-loading="personalLoading">
          <el-container>
            <el-main>
              <personal-user
                :setPersonalLoading="setPersonalLoading"
                ref="personalUser"
                :setPersonalPage="setPersonalPage"
                :deptList="deptList"
                :deptListTreeProps="deptListTreeProps"
                :personalSubmit="personalSubmit"
                export="/exam-admin/sta/exportexamusersta"
                :parameter="{examId:this.personalPages.examId,pass:this.personalPages.pass}"
                :pass="personalPages.pass"
              >
                <el-form-item label="状态">
                  <el-radio-group v-model="personalPages.pass" @change="personalPage(1)">
                    <el-radio-button label="-1">全部</el-radio-button>
                    <el-radio-button :label="1">及格</el-radio-button>
                    <el-radio-button :label="2">补考</el-radio-button>
                    <el-radio-button :label="0">未及格</el-radio-button>
                    <el-radio-button :label="3">未参加</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </personal-user>
              <el-table :data="personalData" height="500">
                <el-table-column type="index" label="序号"/>
                <el-table-column prop="realname" label="姓名"/>
                <el-table-column prop="deptName" label="部门"/>
                <el-table-column prop="examName" label="考试名称"/>
                <!--                <el-table-column prop="type" label="考试类型">-->
                <!--                  <template slot-scope="scope">-->
                <!--                    {{parseInt(scope.row.type) === 1 ? '正式考试' : parseInt(scope.row.type) === 2 ?-->
                <!--                    '模拟考试'-->
                <!--                    :'三违考试'}}-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <el-table-column prop="passMark" label="及格分数"/>
                <el-table-column prop="score" label="成绩"/>
                <el-table-column prop="address" label="是否及格">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.isPass === 1" type="success">及格</el-tag>
                    <el-tag v-else type="danger">未及格</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="isJoinExam" label="是否参加">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.joinExam === 1" type="success">参加</el-tag>
                    <el-tag v-else type="danger">未参加</el-tag>
                  </template>
                </el-table-column>
                <!--<el-table-column prop="address" label="身份证号"/>-->
                <!--<el-table-column prop="address" label="是否补考"/>-->
              </el-table>
              <el-pagination
                @size-change="personalLimit"
                @current-change="personalPage"
                :current-page="personalPages.page"
                :page-size="personalPages.limit"
                :page-sizes="[10, 20, 50]"
                layout="total, sizes,prev, pager, next, jumper"
                :total="personalTotal"
              ></el-pagination>
            </el-main>
          </el-container>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
    <el-dialog
      title="分类管理"
      :visible.sync="dialogFormVisible"
      :show-close="false"
      append-to-body
      width="30%"
    >
      <paper-cate
        ref="paperCate"
        :setCurrent="setCurrent"
        :url="{
                                update:'/exam-admin/exam/cate/update',
                                save:'/exam-admin/exam/cate/save',
                                delete:'/exam-admin/exam/cate/delete',
                                tree:'/exam-admin/exam/cate/tree'
                                }"
        :current="current"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
  // import paperCate from '../paper/papercate'
  import paperCate from '../paper/papercate'
  import {treeDataTranslate} from '@/utils'
  import PersonalUser from './common/personalUser'

  export default {
    name: 'exam',
    components: {PersonalUser, paperCate},
    data: _ => ({
      drawer: false,
      deptLoading: false,
      dialogFormVisible: false,
      personalLoading: false,
      searchLoading: false,
      tab: 'dept',
      list: [], // 列表数据
      deptList: [], // 部门
      current: {},
      deptListTreeProps: {
        checkStrictly: true,
        expandTrigger: 'click',
        label: 'name',
        value: 'id',
        children: 'children',
        emitPath: false
      },
      searchData: '',
      searchForm: {
        name: '',
        startTime: '',
        endTime: '',
        cateId: '',
        type: 0
      },
      deptForm: {
        examId: '',
        deptId: ''
      },
      deptData: [],
      personalData: [],
      searchPages: {
        page: 1,
        limit: 10
      },
      deptPages: {
        page: 1,
        limit: 10
      },
      personalPages: {
        pass: '-1',
        examId: '',
        page: 1,
        limit: 10
      },
      deptTotal: 0,
      personalTotal: 0,
      searchTotal: 0
    }),
    async mounted() {
      let deptList = await this.$http({
        url: this.$http.adornUrl('/usercenter-admin/dept/list'),
        method: 'post'
      })
      this.deptList = treeDataTranslate(
        deptList.data.filter(item => item.parentId !== -1),
        'id'
      )
      this.searchSubmit()
    },
    methods: {
      // 选择分类
      setCurrent(data) {
        if (data.id) {
          this.current = data
          this.searchForm.cateId = data.id
          this.$nextTick(_ => this.$refs['form'].validateField('cateId'))
        }
      },
      checkSort() {
        this.dialogFormVisible = true
        this.paperCate = true
        this.$nextTick(() => {
          this.$refs.paperCate.init()
        })
      },
      delectCate() {
        this.current = { name: '', id: '' }
        this.searchForm.cateId = ''
        this.getDataList()
      },
      _export() {
        window.location = this.$http.downloadUrl(
          '/exam-admin/sta/exportexamdeptsta',
          {
            examId: this.deptForm.examId
          }
        )
      },
      analysis(id) {
        this.tab = 'dept'
        Object.assign(this.deptForm, {deptId: ''})
        this.drawer = true
        this.deptForm.examId = id
        this.personalPages.examId = id
        this.deptSubmit(1)
      },
      tabClick({name}) {
        if (name === 'dept') {
          Object.assign(this.deptForm, {deptId: ''})
          this.deptPages = {
            page: 1,
            limit: 10
          }
          this.deptSubmit(1)
        } else {
          Object.assign(this.personalPages, {pass: '-1', page: 1, limit: 10})
          Object.assign(this.$refs.personalUser.personalForm, {
            realname: '',
            deptId: '',
            // craftName: '',
            // education: '',
            gender: ''
            // mobile: '',
            // politicCountenance: '',
            // professionalTitle: '',
            // identityCard: ''
          })
          this.$refs.personalUser.personalSearch(1)
        }
      },
      searchSubmit(page) {
        this.searchLoading = true
        if (page) this.searchPages.page = page
        if (this.searchData && this.searchData.length) {
          this.searchForm.startTime = `${this.searchData[0]} 00:00:00`
          this.searchForm.endTime = `${this.searchData[1]} 00:00:00`
        } else {
          this.searchForm.startTime = ''
          this.searchForm.endTime = ''
        }
        this.$http({
          url: this.$http.adornUrl('/exam-admin/sta/exam/list'),
          method: 'post',
          data: Object.assign(this.searchForm, this.searchPages)
        })
          .then(res => {
            if (res.data) {
              this.list = res.data.list
              this.searchTotal = res.data.totalCount
            } else {
              this.list = []
              this.searchTotal = 0
            }
            this.searchLoading = false
          })
          .catch(_ => {
            this.list = []
            this.searchLoading = false
          })
      },
      deptSubmit(page) {
        this.deptLoading = true
        if (page) {
          this.deptPages.page = page
        }
        this.$http({
          url: this.$http.adornUrl('/exam-admin/sta/exam/dept'),
          method: 'post',
          data: Object.assign({}, this.deptForm, this.deptPages)
        })
          .then(res => {
            if (res.data) {
              this.deptTotal = res.data.totalCount
              this.deptData = res.data.list
            } else {
              this.deptTotal = 0
              this.deptData = []
            }
            this.deptLoading = false
          })
          .catch(_ => {
            this.deptLoading = false
          })
      },
      setPersonalLoading(Bool) {
        this.personalLoading = Bool
      },
      setPersonalPage(page) {
        this.personalPages.page = page || this.personalPages.page
      },
      async personalSubmit(userIds) {
        this.$http({
          url: this.$http.adornUrl('/exam-admin/sta/exam/user'),
          method: 'post',
          data: Object.assign({userIds: userIds}, this.personalPages)
        })
          .then(res => {
            if (res.data) {
              this.personalTotal = res.data.totalCount
              this.personalData = res.data.list
            } else {
              this.personalTotal = 0
              this.personalData = []
            }
            this.personalLoading = false
          })
          .catch(_ => {
            this.personalLoading = false
          })
      },
      deptLimit(val) {
        this.deptPages = {
          page: 1,
          limit: val
        }
        this.deptSubmit()
      },
      deptPage(val) {
        this.deptPages.page = val
        this.deptSubmit()
      },
      personalLimit(val) {
        this.personalPages.page = 1
        this.personalPages.limit = val
        this.$refs.personalUser.personalSearch()
      },
      personalPage(val) {
        this.personalPages.page = val
        this.$refs.personalUser.personalSearch()
      },
      searchLimit(val) {
        this.searchPages = {
          page: 1,
          limit: val
        }
        this.searchSubmit()
      },
      searchPage(val) {
        this.searchPages.page = val
        this.searchSubmit()
      }
    }
  }
</script>
